<template>
	<view >
		<!-- 设置栏 -->
		<view class="box">
			<view 
			class="top-cont"></view>
			<view
			class="set flex justify-end margin ">
				<image 
				src="/src/static/img/setting.png" 
				mode=""
				@click="handleSetting"></image>
			</view>
		</view>
		
		<!-- 头像栏 -->
		<view class="flex align-center">
			<image 
			class="cu-avatar xl round margin" 
			:src="counter.userData?.avatar" mode="aspectFill"></image>
			<view class="">
				<text class="text-xxl margin-bottom-lg">
				{{counter.userData?.username || '未登录'}}</text>
				<view 
				v-if="!counter.userData?.islogin"
				class="text-sm text-gray margin-top-sm"
				@click="handleLogin">点击登录</view>
			</view>
		</view>
		<view class="margin-sm text-sm text-gray">{{counter.userData?.autograph}}</view>
		<!-- 知名度 -->
		<view class="flex justify-around margin-bottom-sm">
			<view 
			v-for="(item ,index) in perList" 
			@click="handlE(index)"
			class="text-center">
				0
			<view class="text-gray">
				{{item}}
			</view>
			</view>
		</view>
		<!-- 文句与同感 -->
		<view class="padding solids-top margin-top-lg">
			<view class="flex justify-around margin">
				<view class="text-center">
					<view class="">文集 1</view>
					<image  class="wen" src="" mode=""></image>
				</view>
				<text class="text-gray text-sm">字句 0</text>
				<text class="text-gray text-sm">我的同感</text>
			</view>
		</view>
		<!-- 文集 -->
		<view class="flex flex-wrap" >
			<view
			v-for="item in counter.collectedWorks"
			:id="item.objectId"
			:style="{ 
				backgroundImage: `url(${item.picture})`,
				backgroundSize: 'cover', 
				backgroundPosition: 'center center',
				filter: 'brightness(0.9)', 
			}"
			@click="collectionDetails(item.userid,item.titlename)"
			 class="literature margin text-center">
				<text class="text-bold text-lg" :class="item.picture?'text-white':''">{{item.titlename}}</text>
				<view class="text-sm">{{item.optionalrange}}</view>
			</view>
			<view
			@click="handleAddwen"
			 class="literature margin text-center">
				<text
				 style="font-size: 100rpx;"
				class="text-bold">+</text>
				<view class="text-sm">添加文集</view>
			</view>
		</view>
		<!-- 添加文章的按钮 -->
			<button
			class="cu-btn  bg-black text-white btnwen" 
			 @click="handleToCreate">+</button>
			
	</view>
	
</template>

<script setup lang="ts">
import { onLaunch, onLoad, onShow } from '@dcloudio/uni-app'
import {useCounterStore} from'../../store/counter'
	const handleToCreate=()=>{
		uni.navigateTo({
			url:'/pages/create/create'
		})
	}
const perList=['发表','订阅','读者','获赞']	
const counter=useCounterStore()
//进入文集页面
const collectionDetails=(id:string,name:string)=>{
	uni.navigateTo({
		url:`/pages/mine/collectionDetail?userid=${id}&titlename=${name}`
	})
}
//登录功能
const handleLogin=()=>{
	uni.navigateTo({
		url:'/pages/mine/login'
	})
}
//跳转设置页面
const handleSetting=()=>{
	uni.navigateTo({
		url:'/pages/setting/setting'
	})
}
//添加文集
const handleAddwen=()=>{
	uni.navigateTo({
		url:'/pages/mine/cllctdwrks'
	})
}
//状态跳转
const handlE=(indx:number)=>{
	uni.navigateTo({
		url:`/pages/mine/userstate?indx=${indx}`
	})
}
onShow(()=>{
	counter.cllectedW(counter.userData!.objectId)
	uni.getStorage({
		  key:'userinfo',
		  success: async(res) => {
		  	console.log('获取本地账户信息',res);
			counter.userData=await res.data
		  }
	})
})
</script>
<style lang="scss">
.box{
	position: sticky;
	top:0;
	z-index: 777;
	background-color: white;
	.top-cont{
		height: 40px;
	}
}

.wenji{
	display: flex;
	flex-wrap: wrap;
}
	
.set{
	image{
		width: 40rpx;
		height: 40rpx;
	}
} 
page{
	
	background-color: #fff;
	margin-bottom: 60rpx;
}   
.wen{
		background-color: black;
		width: 10rpx;
		height: 10rpx;
		border-radius: 10rpx;
}
.literature{
	display: block;
	position: relative;
	line-height: 300rpx;
	width: 40%;
	height: 300rpx;
	background-color: #F2F2F2;
	.text-sm{
		position: absolute;
		bottom: -120rpx;
		left: 20rpx;
	}
}
.btnwen{
	  position: fixed; 
	  bottom: 80px; 
	  left: 80%; 
	  // transform: translateX(-90%);
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 50rpx;
	  font-size: 80rpx;
	  z-index: 999; /* 避免被其他元素遮挡 */
	  opacity: 0.7;
}
</style>
